<template>
  <el-dialog v-model="addDiglog" title="添加" width="400">
    <el-form :model="addForm" label-width="100px" ref="formRef" :rules="rules">

      <el-form-item label="工作城市" prop="workCity">
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          style="width: 300px"
          @change="headlechange"
        />
      </el-form-item>
      <el-form-item label="工作公司" prop="workCompany">
        <el-input placeholder="请输入工作公司" v-model="addForm.workCompany" />
      </el-form-item>
      <el-form-item label="工作岗位" prop="workPosition">
        <el-input placeholder="请输入工作岗位" v-model="addForm.workPosition" />
      </el-form-item>

      <el-form-item label="入职时间" prop="startDate">
        <el-date-picker
          v-model="addForm.startDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="入职时间"
          size="small"
          style="width: 300px"
        />
      </el-form-item>

      <el-form-item label="离职时间" prop="endDate">
        <el-date-picker
          v-model="addForm.endDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="离职时间"
          size="small"
          style="width: 300px"
        />
      </el-form-item>

      <el-form-item label="薪资/RMB" prop="salary">
        <el-input placeholder="薪资" v-model="addForm.salary" type="number" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="onSubmit(formRef)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from "@/axios/index.js";
import { useStudentStore } from "@/stores/student";
import { regionData, codeToText } from "element-china-area-data";
import { ref, reactive } from "vue";

let formRef = ref()

let options = regionData;
let selectedOptions = ref();
let addDiglog = defineModel("addDiglog");
let emit = defineEmits(['getEmployment'])

let addForm = reactive({
  studentId: useStudentStore().studentInfo.studentId,
  workCity: "",
  workCompany: "",
  workPosition: "",
  startDate: "",
  endDate:"",
  salary: "",
});

/** 增加就业经历*/
function onSubmit(formEl) {

  if(!formEl) return

  formEl.validate((valid,fields) => {
    if (valid) {
      axios
    .post("api/v1/front/employment", addForm, {
      headers: { "Content-Type": "application/json" },
    })
    .then((res) => {
      addForm.workCity = "";
      addForm.workCompany = "";
      addForm.workPosition = "";
      addForm.startDate = "";
      addForm.salary = "";
      selectedOptions.value = ""
      addDiglog.value = false; 
      emit('getEmployment')

    });
    }else{

    }
  })
}
/** 清空表单*/
function reset() {
  addForm.workCity = "";
  addForm.workCompany = "";
  addForm.workPosition = "";
  addForm.startDate = "";
  addForm.salary = "";
  selectedOptions.value = ""
  addDiglog.value = false;
}
/** 选中的城市进行处理*/
function headlechange(val) {
  addForm.workCity =
    codeToText[selectedOptions.value[0]] +
    "-" +
    codeToText[selectedOptions.value[1]] +
    "-" +
    codeToText[selectedOptions.value[2]];
}


const rules = reactive({
  workCity: [{ required: true, message: "请输入工作城市", trigger: "blur" }],
  workCompany: [{required: true,message: "请输入工作公司",trigger: "blur"}],
  workPosition: [{required: true,message: "请输入工作岗位",trigger:"blur"}],
  startDate: [{type: "date",required: true,message: "请选择入职时间",trigger: "change"}],
  endDate:[{type: "date",trigger: "change"}],
  salary: [{ required: true, message: "请输入薪资", trigger: "blur",min: 3, max: 10 },
  { min: 3, max: 10, message: "薪资超出范围", trigger: "change" }],
});
</script>

<style scoped>
</style>